<template>
    <div class="home_body  ">
        <div class="main_body">
            <div class="top_title">
                全国数据上报
            </div>
            <div class="bottom_body d-flex   ">
<!--                <div class="top_button_list">-->
<!--&lt;!&ndash;                    注释多余按钮&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-button type="primary" @click="allSubmit" :disabled="isDisable || allinfo.onloading">上报全部数据</el-button>&ndash;&gt;-->
<!--                    <div v-if="allinfo.showLoading && allinfo.onloading" class="info">-->
<!--                        <div class="loading"></div>-->
<!--                        <span>数据上报中，请耐心等待</span>-->
<!--                    </div>-->
<!--                    <div v-if="allinfo.showLoading && allinfo.finished" class="info">-->
<!--                        <i class="el-icon-check"></i>-->
<!--                        数据上报成功 !-->
<!--                    </div>-->
<!--                </div>-->
                <div class="bottom_info_body ">
                    <div class="log_info ">
                        <div class="log_title">
                            操作日志
                        </div>
                        <div class="log_content overflow-auto-hidden">
                            <div v-if="logList.length > 0">
                                <div class="log_item" v-for="(item,index) in logList" :key="index">
                                    <div class="log_item_title">
                                        <div class="circle"></div>
                                        <div class="log_item_time">{{ item.createTime  }}</div>
                                    </div>
                                    <div class="log_item_content ">
                                        <span class="log_item_contentFont ">{{item.schoolCode}}</span>
                                        <span class="log_item_contentFont">{{item.userName}}</span>
                                        <span class="log_item_contentFont">{{item.schoolName}}</span>
                                        <span class="log_item_contentFont">{{item.data.split("??")[0]}}</span>
                                        <span class="number_item">{{item.total}}</span>
                                        <span class="log_item_contentFont">{{item.data.split("??")[1]}}</span>
                                    </div>
                                    <div v-if="item.url && item.url.indexOf('hnbysjy.jyt.henan.gov.cn') !== -1" class="w-100 pl-28 ">
                                        <Button size="small" type="primary" class=" " @click="downloadLog(item.url)">下载错误日志</Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="logPage.pages > 1" v-loading="logBtnLoading" class="log_footer" @click="showMoreLog">点击显示更多</div>
                    </div>
                </div>
                <div class="bottom_info_body scoll-y">
                        <div class="bottom_item">
                            <div class="card_body">
                                <div class="title">毕业去向信息</div>
                                <div class="car_info">点击上报按钮后，经学校用户审核通过的毕业生毕业去向信息会自动同步到全国系统，实现数据实时上报</div>
                                <div class="button_info">
                                    <el-button v-has="'other'" type="primary" @click="finishSubmit" :disabled="isDisable || finishinfo.onloading">上报毕业去向信息</el-button>
                                     <el-button v-has="'output'" :loading="importing2" type="primary" @click="exportAllGraduationDestination" >备份毕业去向信息</el-button>
                                     <div v-if="finishinfo.showLoading && finishinfo.onloading" class="info ">
                                        <div class="loading"></div>
                                        <span>数据上报中，请耐心等待</span>
                                    </div>
                                    <div v-if="finishinfo.showLoading && finishinfo.finished" class="info ">
                                        <i class="el-icon-check"></i>
                                        数据上报成功 !
                                    </div>
                                </div>
                            </div>
                            <div class="px-12"></div>
                            <div class="card_black"></div>
                            <div class="card_body ">
                                <div class="title">生源信息</div>
                                <div class="car_info">点击上报按钮后，经学校用户比对过的生源信息会自动同步到全国系统，实现数据实时上报</div>
                                <div class="button_info">
                                    <el-button v-has="'add'" type="primary" @click="sourceSubmit" :disabled="isDisable || sourceinfo.onloading">上报生源信息</el-button>
                                    <el-button v-has="'edit'" :loading="importing1" type="primary" @click="dropExportAll" >备份生源信息</el-button>
                                    <div v-if="sourceinfo.showLoading && sourceinfo.onloading" class="info">
                                        <div class="loading"></div>
                                        <span>数据上报中，请耐心等待</span>
                                    </div>
                                    <div v-if="sourceinfo.showLoading && sourceinfo.finished" class="info">
                                        <i class="el-icon-check"></i>
                                        数据上报成功 !
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="bottom_item">
                            <div class="card_body">
                                <div class="title">户口迁移信息</div>
                                <div class="car_info">点击上报按钮后，经学校用户审核通过的毕业生户口迁移信息会自动同步到全国系统，实现数据实时上报</div>
                                <div class="button_info">
                                    <el-button v-has="'delete'" type="primary" @click="accountSubmit" :disabled="isDisable||accountinfo.onloading">上报户口迁移信息</el-button>
                                    <div v-if="accountinfo.showLoading && accountinfo.onloading" class="info">
                                        <div class="loading"></div>
                                        <span>数据上报中，请耐心等待</span>
                                    </div>
                                    <div v-if="accountinfo.showLoading && accountinfo.finished" class="info">
                                        <i class="el-icon-check"></i>
                                        数据上报成功 !
                                    </div>
                                </div>
                            </div>
                            <div class="px-12"></div>
                            <div class="card_black"></div>
                            <div class="card_body">
                                <div class="title">档案转递信息</div>
                                <div class="car_info">点击上报按钮后，经学校用户审核通过的毕业生档案转递信息会自动同步到全国系统，实现数据实时上报</div>
                                 <div class="button_info">
                                    <el-button v-has="'clear'" type="primary" @click="archivesSubmit" :disabled="isDisable || archivesinfo.onloading">上报档案转递信息</el-button>
                                    <div v-if="archivesinfo.showLoading && archivesinfo.onloading" class="info mt-8">
                                        <div class="loading"></div>
                                        <span>数据上报中，请耐心等待</span>
                                    </div>
                                    <div v-if="archivesinfo.showLoading && archivesinfo.finished" class="info mt-8">
                                        <i class="el-icon-check"></i>
                                        数据上报成功 !
                                    </div>
                                </div> 
                            </div>

                            <div v-if="resource === '0'">
                                <div class="px-12"></div>
                                <div class="card_black"></div>
                                <div class="card_body">
                                    <div class="title">职位上报测试</div>
                                    <div class="button_info">
                                        <el-button type="primary" @click="positionSubmit" :disabled="isDisable || position.onloading">测试</el-button>
                                        <div v-if="position.showLoading && position.onloading" class="info mt-8">
                                            <div class="loading"></div>
                                            <span>数据上报中，请耐心等待</span>
                                        </div>
                                        <div v-if="position.showLoading && position.finished" class="info mt-8">
                                            <i class="el-icon-check"></i>
                                            数据上报成功 !
                                        </div>
                                        <el-button type="primary" @click="positionDelSubmit" :disabled="isDisable || position.onloading">删除测试</el-button>
                                        <div v-if="position.showLoading && position.onloading" class="info mt-8">
                                            <div class="loading"></div>
                                            <span>数据上报中，请耐心等待</span>
                                        </div>
                                        <div v-if="position.showLoading && position.finished" class="info mt-8">
                                            <i class="el-icon-check"></i>
                                            数据上报成功 !
                                        </div>
                                    </div>
                                </div>
                            </div>



                        </div>
                </div>
            </div>
        </div>
      <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
            class="cdialog"
          >
        <div class=" fs-16 d-flex-center">
          <div class=" flex-column d-flex-center p-12  mr-28" v-if="downloadType != '2'">
            <span>新增数据（条）</span>
            <span class="fs-20 fw-7 ">{{ sourceinfoData.successCount }}</span>
          </div>
          <div class="d-flex-center flex-column  p-12  mr-28">
            <span>失败数据（条）</span>
            <span class="fs-20 fw-7 ">{{ sourceinfoData.failCount }}</span>
          </div>
          <div class="d-flex-center flex-column  p-12 ">
            <span>更新数据（条）</span>
            <span class="fs-20 fw-7 ">{{ sourceinfoData.updateCount }}</span>
          </div>
        </div>
        <div class="mt-20" v-if="sourceinfoData.failCount > 0">
          <span>出现有误信息，</span><span class="down-btn" @click="download()">请下载查看</span>
        </div>
      </el-dialog>

    </div>
</template>

<script>
import {
    graduationDestinationInformationBackupAPI,
    operationLogAPI,
    positionReportAPI,
    positionReportDelAPI,
    synchronizationAccountAPI,
    synchronizationAPI,
    synchronizationArchiveAPI,
    synchronizationDirectionAPI
} from '../../..//api/bys/dataReport';
import { exportAllPersonInfo } from '@/api/bys/personInfo/bys';
import Cookies from 'js-cookie';

export default {
    data() {
        return {
            resource: '',
            importing1:false,
            importing2:false,
            dialogVisible:false,
            dialogTitle:'',
            showReport: false,
            downloadType:'1',//下载类型
            isDisable: false, //是否禁用同步按钮
            sourceinfoData: {},
            allinfo: {
                //上报所有数据
                showLoading: false, //是否显示正在加载中
                onloading: false, //是否正在加载中
                finished: false //是否完成加载
            },
            sourceinfo: {
                //毕业去向信息
                showLoading: false, //是否显示正在加载中
                onloading: false, //是否正在加载中
                finished: false //是否完成加载
            },
            position: {
                //职位信息
                showLoading: false, //是否显示正在加载中
                onloading: false, //是否正在加载中
                finished: false //是否完成加载
            },
            finishinfo: {
                //毕业去向信息
                showLoading: false, //是否显示正在加载中
                onloading: false, //是否正在加载中
                finished: false //是否完成加载
            },
            archivesinfo: {
                //档案转递信息
                showLoading: false, //是否显示正在加载中
                onloading: false, //是否正在加载中
                finished: false //是否完成加载
            },
            accountinfo: {
                //户口迁移信息
                showLoading: false, //是否显示正在加载中
                onloading: false, //是否正在加载中
                finished: false //是否完成加载
            },
            logBtnLoading: false,
            logPage:{
                pageSize: 10,
                pageNumber: 1,
                pages: 0
            },
            logList: [],
        };
    },
    mounted() {
        this.showMoreLog();
        this.resource = JSON.parse(Cookies.get('userInfo')).resource
    },
    methods: {
        async downloadLog(url) {
            if (url && url.length > 0) {
                if (url.indexOf('hnbysjy.jyt.henan.gov.cn') !== -1) {
                    // const url = 'https://hnbysjy.jyt.henan.gov.cn/file-view-test/jyqx/jyqx66825a97e4b009ea29b73607';
                    const fileName = '数据上报错误日志.xlsx'; // 你可以根据需要更改文件名
                    try {
                        // 使用 fetch 获取文件内容
                        const response = await fetch(url);
                        if (!response.ok) {
                            throw new Error('文件未成功获取：' + response.statusText);
                        }
                        // 获取文件的 Blob 对象
                        const blob = await response.blob();
                        // 创建一个隐藏的 <a> 元素
                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.href = URL.createObjectURL(blob);
                        a.download = fileName;
                        // 将 <a> 元素添加到 DOM 中
                        document.body.appendChild(a);
                        // 触发点击事件
                        a.click();
                        // 移除 <a> 元素
                        document.body.removeChild(a);
                        // 释放 Blob URL
                        URL.revokeObjectURL(a.href);
                    } catch (error) {
                        console.error('There has been a problem with your fetch operation:', error);
                    }

                }
            }
        },
        showMoreLog(){
            this.logBtnLoading = true
            operationLogAPI(this.logPage).then(res => {
                if (res.success) {
                    console.log(res,'res.result')
                    let moreLog = res.result.records || []
                    if(this.logPage.pageNumber === 1){
                        this.logList=moreLog
                    }else{
                        this.logList=[...this.logList,...moreLog]
                    }
                    this.logPage.pages = res.result.pages
                    this.logPage.pageNumber++
                    this.logBtnLoading = false
                }
            })
        },
        //点击上报所有数据事件
        allSubmit() {},
        //职位上报测试
        positionReportAPI(){
            this.sourceinfo.showLoading = true
            this.sourceinfo.onloading = true
            this.sourceinfo.finished = false
            positionReportAPI().then(res => {
                if (res.success) {
                    this.$Message.info('上报成功');

                }else{
                    this.$Message.info('上报失败');
                }
                this.sourceinfo.showLoading = false
                this.sourceinfo.onloading = false
                this.sourceinfo.finished = true
            })
        },
        //职位上报测试

        positionSubmit() {
            this.position.showLoading = true
            this.position.onloading = true
            this.position.finished = false
            positionReportAPI().then(res => {
                if (res.success) {
                    this.$Message.info('上报成功');

                }else{
                    this.$Message.info('上报失败');
                }
                this.position.showLoading = false
                this.position.onloading = false
                this.position.finished = true
            })
        },

        positionDelSubmit() {
            this.position.showLoading = true
            this.position.onloading = true
            this.position.finished = false
            positionReportDelAPI().then(res => {
                if (res.success) {
                    this.$Message.info('上报成功');

                }else{
                    this.$Message.info('上报失败');
                }
                this.position.showLoading = false
                this.position.onloading = false
                this.position.finished = true
            })
        },

        //点击上报毕业去向信息事件
        sourceSubmit() {
          this.sourceinfo.showLoading = true
          this.sourceinfo.onloading = true
          this.sourceinfo.finished = false
          synchronizationAPI().then(res => {
            if (res.success) {
              this.sourceinfoData = res?.result || {}
              console.log(this.sourceinfoData,'this.sourceinfoData')
              this.sourceinfo.showLoading = false
              this.sourceinfo.onloading = false
              this.sourceinfo.finished = true
              this.dialogTitle = '上报生源信息结果'
              this.dialogVisible = true
              this.downloadType = '1'
            }else{
              this.sourceinfo.showLoading = false
              this.sourceinfo.onloading = false
              this.sourceinfo.finished = true
            }
            this.logPage.pageNumber = 1
            this.logPage.pages = 0
            this.logPage.pageSize = 10
            this.showMoreLog()
          })
        },
        // 备份生源
        dropExportAll() {
            this.importing1 = true;
            exportAllPersonInfo().then(res => {
                this.importing1 = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '生源信息备份.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
        },
        // 备份毕业去向
        exportAllGraduationDestination(){
            this.importing2 = true;
            graduationDestinationInformationBackupAPI().then(res => {
                this.importing2 = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '毕业去向备份.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
        },
        //点击上报毕业去向信息事件
        finishSubmit() {
          this.finishinfo.showLoading = true
          this.finishinfo.onloading = true
          this.finishinfo.finished = false
          synchronizationDirectionAPI().then(res => {
            if (res.success) {
              this.sourceinfoData = res?.result || {}
              this.finishinfo.showLoading = false
              this.finishinfo.onloading = false
              this.finishinfo.finished = true
              this.dialogTitle = '上报去向登记信息结果'
              this.dialogVisible = true
              this.downloadType = '2'
            }else{
              this.finishinfo.showLoading = false
              this.finishinfo.onloading = false
            }
              this.logPage.pageNumber = 1
              this.logPage.pages = 0
              this.logPage.pageSize = 10
              this.showMoreLog()
          })
        },
        //点击上报档案转递信息事件
        archivesSubmit() {
            this.archivesinfo.showLoading = true
            this.archivesinfo.onloading = true
            this.archivesinfo.finished = false
            synchronizationArchiveAPI().then(res => {
                if (res.success) {
                    this.sourceinfoData = res?.result || {}
                    this.archivesinfo.showLoading = false
                    this.archivesinfo.onloading = false
                    this.archivesinfo.finished = true
                    this.dialogTitle = '上报户档登记信息结果'
                    this.dialogVisible = true
                    this.downloadType = '2'
                }else{
                    this.archivesinfo.showLoading = false
                    this.archivesinfo.onloading = false
                }
                this.logPage.pageNumber = 1
                this.logPage.pages = 0
                this.logPage.pageSize = 10
                this.showMoreLog()
            })
        },
        //点击上报户口迁移信息事件
        accountSubmit() {
            this.accountinfo.showLoading = true
            this.accountinfo.onloading = true
            this.accountinfo.finished = false
            synchronizationAccountAPI().then(res => {
                if (res.success) {
                    this.sourceinfoData = res?.result || {}
                    this.accountinfo.showLoading = false
                    this.accountinfo.onloading = false
                    this.accountinfo.finished = true
                    this.dialogTitle = '上报户口登记信息结果'
                    this.dialogVisible = true
                    this.downloadType = '2'
                }else{
                    this.accountinfo.showLoading = false
                    this.accountinfo.onloading = false
                }
                this.logPage.pageNumber = 1
                this.logPage.pages = 0
                this.logPage.pageSize = 10
                this.showMoreLog()
            })
        },
        //点击下载查看
        async download() {
            if (this.downloadType === '1') {
                if (this.sourceinfoData.url.indexOf('hnbysjy.jyt.henan.gov.cn') !== -1) {
                    // const url = 'https://hnbysjy.jyt.henan.gov.cn/file-view-test/jyqx/jyqx66825a97e4b009ea29b73607';
                    const fileName = '生源错误信息.xlsx'; // 你可以根据需要更改文件名
                    try {
                        // 使用 fetch 获取文件内容
                        const response = await fetch(this.sourceinfoData.url);
                        if (!response.ok) {
                            throw new Error('文件未成功获取：' + response.statusText);
                        }
                        // 获取文件的 Blob 对象
                        const blob = await response.blob();
                        // 创建一个隐藏的 <a> 元素
                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.href = URL.createObjectURL(blob);
                        a.download = fileName;
                        // 将 <a> 元素添加到 DOM 中
                        document.body.appendChild(a);
                        // 触发点击事件
                        a.click();
                        // 移除 <a> 元素
                        document.body.removeChild(a);
                        // 释放 Blob URL
                        URL.revokeObjectURL(a.href);
                    } catch (error) {
                        console.error('There has been a problem with your fetch operation:', error);
                    }

                }


                // getsyErrorDataAPI({url: this.sourceinfoData.url}).then(res => {
                //   console.log(this.sourceinfoData.url,'this.sourceinfoData.url')
                //   // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                //   const blob = new Blob([res], {type: 'charset=utf-8'});
                //   let url = window.URL.createObjectURL(blob);
                //   const link = document.createElement('a');
                //   link.style.display = 'none';
                //   link.href = url;
                //   link.setAttribute('download', '生源错误信息.xlsx');
                //   document.body.appendChild(link);
                //   link.click();
                //   document.body.removeChild(link); // 删除节点
                //   window.URL.revokeObjectURL(url); //释放该 url
                // })
            }
            if (this.downloadType === '2') {
                if (this.sourceinfoData.url.indexOf('hnbysjy.jyt.henan.gov.cn') !== -1) {
                    // const url = 'https://hnbysjy.jyt.henan.gov.cn/file-view-test/jyqx/jyqx66825a97e4b009ea29b73607';
                    const fileName = '去向登记错误信息.xlsx'; // 你可以根据需要更改文件名
                    try {
                        // 使用 fetch 获取文件内容
                        const response = await fetch(this.sourceinfoData.url);
                        if (!response.ok) {
                            throw new Error('文件未成功获取：' + response.statusText);
                        }
                        // 获取文件的 Blob 对象
                        const blob = await response.blob();
                        // 创建一个隐藏的 <a> 元素
                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.href = URL.createObjectURL(blob);
                        a.download = fileName;
                        // 将 <a> 元素添加到 DOM 中
                        document.body.appendChild(a);
                        // 触发点击事件
                        a.click();
                        // 移除 <a> 元素
                        document.body.removeChild(a);
                        // 释放 Blob URL
                        URL.revokeObjectURL(a.href);
                    } catch (error) {
                        console.error('There has been a problem with your fetch operation:', error);
                    }

                }
                // getErrorDirectionDataAPI({ url: this.sourceinfoData.url }).then(res => {
                //     // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                //     const blob = new Blob([res], { type: 'charset=utf-8' });
                //     let url = window.URL.createObjectURL(blob);
                //     const link = document.createElement('a');
                //     link.style.display = 'none';
                //     link.href = url;
                //     link.setAttribute('download', '去向登记错误信息.xlsx');
                //     document.body.appendChild(link);
                //     link.click();
                //     document.body.removeChild(link); // 删除节点
                //     window.URL.revokeObjectURL(url); //释放该 url
                //
                // })
                console.log('毕业去向')
            }
            if (this.downloadType === '3') {
                console.log('户口迁移')
            }
            if (this.downloadType === '4') {
                console.log('档案')
            }


        }
    }
};
</script>

<style scoped lang="less">
/deep/ .el-dialog__header{
  //background-color: #2b85e4;
  border-bottom: #F2F6FC 1px solid;
}
/deep/ .el-dialog__title {
  line-height: 24px;
  font-size: 16px;
  font-weight: 700;
  color: #303133;
}
/*加载转动*/
.loading {
    margin-right: 10px;
    display: inline-block;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: loading-spin 1.2s linear infinite;
}
/*转动动画*/
@keyframes loading-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.home_body {
    width: 100%;
    height: 100%;
    background: #ffffff;
    .main_body {
        width: 100%;
        height: 100%;
        margin: 0px 10px;
        padding-top: 10px;
        .top_title {
            font-size: 16px;
            font-weight: 600;
            padding: 10px;
            border-bottom: 1px solid rgb(235, 231, 231);
        }
        .bottom_body {
            width:99%;
            height: 94%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
            .top_button_list {
                padding: 10px;
                display: flex;
                font-size: 16px;
                align-items: center;
                .info {
                    display: flex;
                    align-items: center;
                    margin-left: 30px;
                    font-size: 16px;
                    color: rgba(0, 0, 0, 0.5);
                    .el-icon-check {
                        margin-right: 10px;
                        font-size: 30px;
                    }
                }
            }
            .bottom_info_body {
                width: 49.5%;
                height: 100%;
                padding: 10px 0px;
                .bottom_item {
                    //display: flex;
                    //justify-content: space-between;
                    //align-items: center;
                    margin-bottom: 20px;
                    .card_black {
                        flex: 1;
                        padding: 10px;
                    }
                    .card_body {
                        flex: 1;
                        padding: 10px;
                        border: 1px solid rgb(235, 231, 231);
                        border-radius: 5px;
                        .title {
                            font-size: 14px;
                            font-weight: 600;
                        }
                        .car_info {
                            padding: 10px;
                            font-size: 14px;
                            margin: 20px 0px;
                            color: rgba(0, 0, 0, 0.5);
                            background: rgb(230, 247, 255);
                            border: 1px solid rgb(145, 213, 255);
                            border-radius: 5px;
                        }
                        .button_info {
                            display: flex;
                            align-items: center;
                        }
                        .info {
                            display: flex;
                            align-items: center;
                            margin-left: 30px;
                            font-size: 16px;
                            color: rgba(0, 0, 0, 0.5);
                            .el-icon-check {
                                margin-right: 10px;
                                font-size: 30px;
                            }
                        }
                    }
                }
                .log_info {
                    width: 100%;
                    height: 100%;
                    border: 1px solid rgb(235, 231, 231);
                    .log_title{
                        width: 100%;
                        height:40px;
                        font-size: 14px;
                        font-weight: 600;
                        padding-left: 20px;
                        display: flex;
                        align-items: center;
                    }
                    .log_content{
                        width: 100%;
                        height: calc(100% - 80px);
                        padding-top: 2px;
                        .log_item{
                            width: 100%;
                            // height: 90px;
                            margin-bottom: 8px;
                            .log_item_title{
                                width: 100%;
                                height: 10px;
                                display: flex;
                                align-items: center;
                               .circle{
                                   width: 10px; /* 设置宽度 */
                                   height: 10px; /* 设置高度 */
                                   border-radius: 50%; /* 将边角半径设为50%，这样元素就会呈现为圆形 */
                                   border: 2px solid rgb(41, 152, 255); /* 设置边框 */
                                   //background-color: rgb(41, 152, 255); /* 设置圆形的背景颜色 */
                                   margin-left: 12px;
                                   margin-right: 12px;
                               }
                                .log_item_time{
                                    font-size: 14px;
                                }
                            }
                            .log_item_content{
                                margin-left: 34px;
                                word-wrap: break-word;
                                .log_item_contentFont{
                                    font-size: 14px;
                                    margin-right: 4px;
                                }
                                .number_item{
                                    font-size: 14px;
                                    margin-right: 4px;
                                    color: rgba(41, 152, 255);
                                }
                            }

                        }
                    }
                    .log_footer{
                        width: 100%;
                        height:40px;
                        font-size: 15px;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        color: rgba(41, 152, 255);
                    }
                }
            }
            .scoll-y {
                overflow-y: auto;
            }
        }
    }
}
.cdialog {
    // width: 650px
}
.down-btn {
   color:#4081ff;cursor: pointer;font-weight: 700
}
</style>
